@charset "UTF-8";
.#{$prefix}-metro-dragging .#{$prefix}-tile {
  -webkit-transform: scale(0.93);
  transform: scale(0.97);
  opacity: 0.7;
}

.#{$prefix}-tile-dd-proxy {
  -webkit-transition: all 0s !important;
  transition: all 0s !important;
  -ms-transition: all 0s !important;
  transform: scale(1);
  z-index: 1009;
}

.#{$prefix}-tile-dragover {
  opacity: 0.8;
  box-shadow: 0px 0px 6px rgba(11, 88, 139, 0.9) !important; }

.#{$prefix}-tile-empty {
  box-shadow: none !important; }

.#{$prefix}-tile-empty:hover {
  outline: none !important; }

.#{$prefix}-tile {
  text-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  float: left;
  display:block;
  margin: $tileMargin;
  -webkit-transition: all .2s;
  -webkit-transition-delay: 0;
  transition: all .2.5s;
  transition-delay: 0;
  -ms-transition: all .2.5s;
  -ms-transition-delay: 0;
  -webkit-transition-timing-function: ease-out; 
  position:relative;
  text-align: left;
}


.#{$prefix}-tile-dd-proxy {
  opacity: 0.9;
  z-index: 9999;
  cursor: move; 
}

.#{$prefix}-tile-background {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
}

.#{$prefix}-tile-wallpaper-image {
  height: 100%;
  width: 100%; }


.#{$prefix}-tile:hover {
  cursor: default;
}
.#{$prefix}-tile-outline{
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  -webkit-transition: all .2s;
  -webkit-transition-delay: 0;
  transition: all .2.5s;
  transition-delay: 0;
  -ms-transition: all .2.5s;
  -ms-transition-delay: 0;
  -webkit-transition-timing-function: ease-out; 
}

.#{$prefix}-tile-outline:hover{
  box-shadow: none;
  outline: 1px solid rgba(255, 255, 255, 1); 
  box-shadow: 0 0 8px rgba(255, 255, 255, 1);
}

.#{$prefix}-ie8 .#{$prefix}-tile:hover {
  outline: 4px solid #fbfbfb; }

.#{$prefix}-tile.selected {
    outline: 1px solid rgba(255, 255, 255, 1); 
    box-shadow: 0 0 8px rgba(255, 255, 255, 1);
 }

.#{$prefix}-tile:active {
    -ms-transform: scale(0.97,0.97) !important;
    -webkit-transform: scale(0.97,0.97) !important;
    transform: scale(0.97,0.97)!important;
}

.#{$prefix}-tile.selected:before {
  position: absolute;
  top: 0px;
  right: 4px;
  z-index: 1002;
  font-family: 'Glyphicons Halflings';
  color: #fff;
  content: "\e013"; }

.#{$prefix}-tile.selected:after {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 1001;
  display: block;
  width: 0;
  height: 0;
  border-top: 40px solid rgba(0, 0, 0, 0.3);
  border-left: 40px solid transparent;
  content: ""; 
}

.#{$prefix}-tile-mini {
  height: $tileSize;
  width: $tileSize; 
}

.#{$prefix}-tile-default {
  width: $tileSize * 2 + $tileMargin * 2;
  height: $tileSize; 
}
.#{$prefix}-tile-large{
    width: $tileSize * 2 + $tileMargin * 2;
    height: $tileSize * 2 + $tileMargin * 2;
}


.#{$prefix}-tile-mini  .#{$prefix}-tile-icon {
  left: ($tileSize - $tileIconSize) / 2;
  top: ($tileSize - $tileIconSize) / 2; 
}

.#{$prefix}-tile-default .#{$prefix}-tile-icon {
  left: ($tileSize * 2 + $tileMargin * 2 - $tileIconSize) / 2;
  top: ($tileSize - $tileIconSize) / 2;;
}
  
.#{$prefix}-tile-large  .#{$prefix}-tile-icon{
  left: ($tileSize * 2 + $tileMargin * 2 - $tileIconSize * 2) / 2;
  top: ($tileSize * 2 + $tileMargin * 2 - $tileIconSize * 2) / 2;
  width: $tileIconSize * 2;
  height: $tileIconSize * 2;
}


.#{$prefix}-tile-live {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%; 
}

.#{$prefix}-tile-live img {
  height: 100%;
  width: 100%; 
}

.#{$prefix}-tile-text {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 1;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.3);
  font-size: 12px;
  color: #fff;
  max-height: 40px; }


.#{$prefix}-tile-title{
    text-align: center;
    width:100%;
    font-size:14pt;
    line-height: $tileSize;
}

.#{$prefix}-tile-large .#{$prefix}-tile-title{
    line-height: $tileSize * 2;
    font-size:20pt;
}

.#{$prefix}-tile-text-float {
  bottom: -40px;
  -webkit-transition: all .5s;
  -webkit-transition-delay: .5;
  transition: all .5s;
  transition-delay: .5;
  -ms-transition: all .5s;
  -ms-transition-delay: .5;
  -webkit-transition: all .5s; }

.#{$prefix}-tile:hover > .#{$prefix}-tile-text-float {
  bottom: 0px; }

.#{$prefix}-tile-inner {
  padding: 10px; 
}

.#{$prefix}-tile-content {
  width:100%;
  height:100%;
  overflow: hidden;
  position:relative;
}

.#{$prefix}-tile-name {
  position: absolute;
  bottom: 0px;
  padding: 5px 0px 5px 5px; 
  font-size: 12px;
}

.#{$prefix}-tile-icon {
  position: absolute;
  width: $tileIconSize;
  height: $tileIconSize;
  text-align: center; 
}

.#{$prefix}-tile-icon > img {
  max-width: 100%;
  max-height: 100%; 
}

.#{$prefix}-tile-hidden {
  display: none; 
}

.#{$prefix}-flip-container{
    height: 100%;
    width: 100%;
    z-index: 0;
    position:relative;
    overflow:hidden;
}


.#{$prefix}-flip-container  img{
    max-width: 100%;
    max-height: 100%;
}

.#{$prefix}-flip-front{
    position: absolute;
    display: table;
    padding: 0;
    marign: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    webkit-transition: -webkit-transform $tileAnimateDuration;
   -moz-transition: -moz-transform $tileAnimateDuration;
   -o-transition: -o-transform $tileAnimateDuration;
   -ms-transition: -ms-transform $tileAnimateDuration;
   transition: transform $tileAnimateDuration;
}

.#{$prefix}-flip-back{
    position: absolute;
    display: table;
    padding: 0;
    marign: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    webkit-transition: -webkit-transform $tileAnimateDuration;
   -moz-transition: -moz-transform $tileAnimateDuration;
   -o-transition: -o-transform $tileAnimateDuration;
   -ms-transition: -ms-transform $tileAnimateDuration;
   transition: transform $tileAnimateDuration;
}

.#{$prefix}-flip-vertical .#{$prefix}-flip-front{
    -moz-transform:  rotateX(0deg);
    -webkit-transform:  rotateX(0deg);
    transform:  rotateX(0deg);
}

.#{$prefix}-flip-vertical .#{$prefix}-flip-back{
    -moz-transform:  rotateX(180deg);
    -webkit-transform:  rotateX(180deg);
    transform:  rotateX(180deg);
}

.#{$prefix}-flip-vertical:hover .#{$prefix}-flip-front{
    -webkit-transform:  rotateX(-179.9deg);
    -moz-transform:  rotateX(-179.9deg);
    transform:  rotateX(-179.9deg);
}

.#{$prefix}-flip-vertical:hover .#{$prefix}-flip-back{
    -moz-transform:  rotateX(0);
    -webkit-transform:  rotateX(0);
    transform:  rotateX(0);
}

.#{$prefix}-flip-horizontal.#{$prefix}-flip-front{
    -moz-transform:  rotateY(0deg);
    -webkit-transform:  rotateY(0deg);
    transform:  rotateY(0deg);
}

.#{$prefix}-flip-horizontal .#{$prefix}-flip-back{
       -moz-transform:  rotateY(180deg);
    -webkit-transform:  rotateY(180deg);
    transform:  rotateY(180deg);
}

.#{$prefix}-flip-horizontal:hover .#{$prefix}-flip-front{
    -webkit-transform:  rotateY(-179.9deg);
    -moz-transform:  rotateY(-179.9deg);
    transform:  rotateY(-179.9deg);
}

.#{$prefix}-flip-horizontal:hover .#{$prefix}-flip-back{
    -moz-transform:  rotateY(0);
    -webkit-transform:  rotateY(0);
    transform:  rotateY(0);
}




.#{$prefix}-slide-front{
    position: absolute;
    display: table;
    padding: 0;
    marign: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    webkit-transition: -webkit-transform $tileAnimateDuration;
   -moz-transition: -moz-transform $tileAnimateDuration;
   -o-transition: -o-transform $tileAnimateDuration;
   -ms-transition: -ms-transform $tileAnimateDuration;
   transition: transform $tileAnimateDuration;
}

.#{$prefix}-slide-back{
    position: absolute;
    display: table;
    padding: 0;
    marign: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    webkit-transition: -webkit-transform $tileAnimateDuration;
   -moz-transition: -moz-transform $tileAnimateDuration;
   -o-transition: -o-transform $tileAnimateDuration;
   -ms-transition: -ms-transform $tileAnimateDuration;
   transition: transform $tileAnimateDuration;
}

.#{$prefix}-slide-container{
    height: 100%;
    width: 100%;
    z-index: 0;
    overflow: hidden;
    position:relative;
}

//HteOS tile slide left
.#{$prefix}-tile-mini .#{$prefix}-slide-left > .#{$prefix}-slide-front,
.#{$prefix}-tile-mini .#{$prefix}-slide-right > .#{$prefix}-slide-front,
.#{$prefix}-tile-default .#{$prefix}-slide-left > .#{$prefix}-slide-front,
.#{$prefix}-tile-default .#{$prefix}-slide-right > .#{$prefix}-slide-front,
.#{$prefix}-tile-large .#{$prefix}-slide-left > .#{$prefix}-slide-front,
.#{$prefix}-tile-large .#{$prefix}-slide-right > .#{$prefix}-slide-front{
    -moz-transform:  translateX(0);
    -webkit-transform:  translateX(0);
    transform:  translateX(0);
}

.#{$prefix}-tile-mini:hover .#{$prefix}-slide-left > .#{$prefix}-slide-back,
.#{$prefix}-tile-mini:hover .#{$prefix}-slide-right > .#{$prefix}-slide-back,
.#{$prefix}-tile-default:hover .#{$prefix}-slide-left > .#{$prefix}-slide-back,
.#{$prefix}-tile-default:hover .#{$prefix}-slide-right > .#{$prefix}-slide-back,
.#{$prefix}-tile-large:hover .#{$prefix}-slide-left > .#{$prefix}-slide-back,
.#{$prefix}-tile-large:hover .#{$prefix}-slide-right > .#{$prefix}-slide-back{
    -moz-transform:  translateX(0);
    -webkit-transform:  translateX(0);
    transform:  translateX(0);
}
.#{$prefix}-tile-mini:hover .#{$prefix}-slide-left > .#{$prefix}-slide-front{
    -moz-transform:  translateX($tileSize);
    -webkit-transform:  translateX($tileSize);
    transform:  translateX($tileSize);
}

.#{$prefix}-tile-mini .#{$prefix}-slide-left > .#{$prefix}-slide-back{
    -moz-transform:  translateX(0 - $tileSize);
    -webkit-transform:  translateX(0 - $tileSize);
    transform:  translateX(0 - $tileSize);
}

.#{$prefix}-tile-default .#{$prefix}-slide-left > .#{$prefix}-slide-back,
.#{$prefix}-tile-large .#{$prefix}-slide-left > .#{$prefix}-slide-back{
    -moz-transform:  translateX(0 - $tileSize * 2);
    -webkit-transform:  translateX(0 - $tileSize * 2);
    transform:  translateX(0 - $tileSize * 2);
}

.#{$prefix}-tile-default:hover .#{$prefix}-slide-left > .#{$prefix}-slide-front,
.#{$prefix}-tile-large:hover .#{$prefix}-slide-left > .#{$prefix}-slide-front{
    -moz-transform:  translateX($tileSize * 2);
    -webkit-transform:  translateX($tileSize* 2);
    transform:  translateX($tileSize* 2); 
}

//HteOS tile slide right
.#{$prefix}-tile-mini:hover .#{$prefix}-slide-right > .#{$prefix}-slide-front{
    -moz-transform:  translateX(0 - $tileSize);
    -webkit-transform:  translateX(0 - $tileSize);
    transform:  translateX(0 - $tileSize);
}

.#{$prefix}-tile-mini .#{$prefix}-slide-right > .#{$prefix}-slide-back{
    -moz-transform:  translateX($tileSize);
    -webkit-transform:  translateX($tileSize);
    transform:  translateX($tileSize);
}

.#{$prefix}-tile-default .#{$prefix}-slide-right > .#{$prefix}-slide-back,
.#{$prefix}-tile-large .#{$prefix}-slide-right > .#{$prefix}-slide-back{
    -moz-transform:  translateX($tileSize * 2);
    -webkit-transform:  translateX($tileSize * 2);
    transform:  translateX($tileSize * 2);
}

.#{$prefix}-tile-default:hover .#{$prefix}-slide-right > .#{$prefix}-slide-front,
.#{$prefix}-tile-large:hover .#{$prefix}-slide-right > .#{$prefix}-slide-front{
    -moz-transform:  translateX(0 - $tileSize * 2);
    -webkit-transform:  translateX(0 - $tileSize* 2);
    transform:  translateX(0 - $tileSize* 2); 
}

/**
 * HteOS slide down    
 * **/
.#{$prefix}-tile-mini .#{$prefix}-slide-up > .#{$prefix}-slide-front,
.#{$prefix}-tile-mini .#{$prefix}-slide-down > .#{$prefix}-slide-front,
.#{$prefix}-tile-default .#{$prefix}-slide-up > .#{$prefix}-slide-front,
.#{$prefix}-tile-default .#{$prefix}-slide-down > .#{$prefix}-slide-front,
.#{$prefix}-tile-large .#{$prefix}-slide-up > .#{$prefix}-slide-front,
.#{$prefix}-tile-large .#{$prefix}-slide-down > .#{$prefix}-slide-front{
    -moz-transform:  translateY(0);
    -webkit-transform:  translateY(0);
    transform:  translateY(0);
}

.#{$prefix}-tile-mini:hover .#{$prefix}-slide-up > .#{$prefix}-slide-back,
.#{$prefix}-tile-mini:hover .#{$prefix}-slide-down > .#{$prefix}-slide-back,
.#{$prefix}-tile-default:hover .#{$prefix}-slide-up > .#{$prefix}-slide-back,
.#{$prefix}-tile-default:hover .#{$prefix}-slide-down > .#{$prefix}-slide-back,
.#{$prefix}-tile-large:hover .#{$prefix}-slide-up > .#{$prefix}-slide-back,
.#{$prefix}-tile-large:hover .#{$prefix}-slide-down > .#{$prefix}-slide-back{
    -moz-transform:  translateY(0);
    -webkit-transform:  translateY(0);
    transform:  translateY(0);
}

.#{$prefix}-tile-default .#{$prefix}-slide-down > .#{$prefix}-slide-back,
.#{$prefix}-tile-mini .#{$prefix}-slide-down > .#{$prefix}-slide-back{
    -moz-transform:  translateY(0 - $tileSize);
    -webkit-transform:  translateY(0 - $tileSize);
    transform:  translateY(0 - $tileSize);
}

.#{$prefix}-tile-large .#{$prefix}-slide-down > .#{$prefix}-slide-back{
    -moz-transform:  translateY(0 - $tileSize * 2);
    -webkit-transform:  translateY(0 - $tileSize * 2);
    transform:  translateY(0 - $tileSize * 2);
}

.#{$prefix}-tile-default:hover .#{$prefix}-slide-down > .#{$prefix}-slide-front,
.#{$prefix}-tile-mini:hover .#{$prefix}-slide-down > .#{$prefix}-slide-front{
    -moz-transform:  translateY($tileSize);
    -webkit-transform:  translateY($tileSize);
    transform:  translateY($tileSize);
}

.#{$prefix}-tile-large:hover .#{$prefix}-slide-down > .#{$prefix}-slide-front{
    -moz-transform:  translateY($tileSize * 2);
    -webkit-transform:  translateY($tileSize* 2);
    transform:  translateY($tileSize* 2); 
}

/**
 * HteOS slide up    
 * **/
.#{$prefix}-tile-mini .#{$prefix}-slide-up > .#{$prefix}-slide-back,
.#{$prefix}-tile-default .#{$prefix}-slide-up > .#{$prefix}-slide-back{
    -moz-transform:  translateY($tileSize);
    -webkit-transform:  translateY($tileSize);
    transform:  translateY($tileSize);
}


.#{$prefix}-tile-large .#{$prefix}-slide-up > .#{$prefix}-slide-back{
    -moz-transform:  translateY($tileSize * 2);
    -webkit-transform:  translateY($tileSize * 2);
    transform:  translateY($tileSize * 2);
}

.#{$prefix}-tile-mini:hover .#{$prefix}-slide-up > .#{$prefix}-slide-front,
.#{$prefix}-tile-default:hover .#{$prefix}-slide-up > .#{$prefix}-slide-front{
    -moz-transform:  translateY(0 - $tileSize);
    -webkit-transform:  translateY(0 - $tileSize);
    transform:  translateY(0 - $tileSize);
} 

.#{$prefix}-tile-large:hover .#{$prefix}-slide-up > .#{$prefix}-slide-front{
    -moz-transform:  translateY(0 - $tileSize * 2);
    -webkit-transform:  translateY(0 - $tileSize* 2);
    transform:  translateY(0 - $tileSize* 2); 
}

/**
 * HteOS tile switch    
 * **/

.#{$prefix}-switch-front{
    position: absolute;
    display: table;
    padding: 0;
    marign: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    webkit-transition: -webkit-transform $tileAnimateDuration;
   -moz-transition: -moz-transform $tileAnimateDuration;
   -o-transition: -o-transform $tileAnimateDuration;
   -ms-transition: -ms-transform $tileAnimateDuration;
   transition: transform $tileAnimateDuration;
}

.#{$prefix}-switch-back{
    position: absolute;
    display: table;
    padding: 0;
    marign: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    webkit-transition: -webkit-transform $tileAnimateDuration;
   -moz-transition: -moz-transform $tileAnimateDuration;
   -o-transition: -o-transform $tileAnimateDuration;
   -ms-transition: -ms-transform $tileAnimateDuration;
   transition: transform $tileAnimateDuration;
}

.#{$prefix}-switch-container{
    height: 100%;
    width: 100%;
    z-index: 0;
    overflow: hidden;
    position:relative;
}

//HteOS tile switch left
.#{$prefix}-tile-mini .#{$prefix}-switch-left > .#{$prefix}-switch-front,
.#{$prefix}-tile-mini .#{$prefix}-switch-right > .#{$prefix}-switch-front,
.#{$prefix}-tile-default .#{$prefix}-switch-left > .#{$prefix}-switch-front,
.#{$prefix}-tile-default .#{$prefix}-switch-right > .#{$prefix}-switch-front,
.#{$prefix}-tile-large .#{$prefix}-switch-left > .#{$prefix}-switch-front,
.#{$prefix}-tile-large .#{$prefix}-switch-right > .#{$prefix}-switch-front{
    -moz-transform:  translateX(0);
    -webkit-transform:  translateX(0);
    transform:  translateX(0);
}

.#{$prefix}-tile-mini:hover .#{$prefix}-switch-left > .#{$prefix}-switch-back,
.#{$prefix}-tile-mini:hover .#{$prefix}-switch-right > .#{$prefix}-switch-back,
.#{$prefix}-tile-default:hover .#{$prefix}-switch-left > .#{$prefix}-switch-back,
.#{$prefix}-tile-default:hover .#{$prefix}-switch-right > .#{$prefix}-switch-back,
.#{$prefix}-tile-large:hover .#{$prefix}-switch-left > .#{$prefix}-switch-back,
.#{$prefix}-tile-large:hover .#{$prefix}-switch-right > .#{$prefix}-switch-back{
    -moz-transform:  translateX(0);
    -webkit-transform:  translateX(0);
    transform:  translateX(0);
}
.#{$prefix}-tile-mini:hover .#{$prefix}-switch-left > .#{$prefix}-switch-front{
    -moz-transform:  translateX(0 - $tileSize);
    -webkit-transform:  translateX(0 - $tileSize);
    transform:  translateX(0 - $tileSize);
}

.#{$prefix}-tile-mini .#{$prefix}-switch-left > .#{$prefix}-switch-back{
    -moz-transform:  translateX(0 - $tileSize);
    -webkit-transform:  translateX(0 - $tileSize);
    transform:  translateX(0 - $tileSize);
}

.#{$prefix}-tile-default .#{$prefix}-switch-left > .#{$prefix}-switch-back,
.#{$prefix}-tile-large .#{$prefix}-switch-left > .#{$prefix}-switch-back{
    -moz-transform:  translateX(0 - $tileSize * 2);
    -webkit-transform:  translateX(0 - $tileSize * 2);
    transform:  translateX(0 - $tileSize * 2);
}

.#{$prefix}-tile-default:hover .#{$prefix}-switch-left > .#{$prefix}-switch-front,
.#{$prefix}-tile-large:hover .#{$prefix}-switch-left > .#{$prefix}-switch-front{
    -moz-transform:  translateX(0 - $tileSize * 2);
    -webkit-transform:  translateX(0 - $tileSize* 2);
    transform:  translateX(0 - $tileSize* 2); 
}

//HteOS tile switch right
.#{$prefix}-tile-mini:hover .#{$prefix}-switch-right > .#{$prefix}-switch-front{
    -moz-transform:  translateX($tileSize);
    -webkit-transform:  translateX($tileSize);
    transform:  translateX($tileSize);
}

.#{$prefix}-tile-mini .#{$prefix}-switch-right > .#{$prefix}-switch-back{
    -moz-transform:  translateX($tileSize);
    -webkit-transform:  translateX($tileSize);
    transform:  translateX($tileSize);
}

.#{$prefix}-tile-default .#{$prefix}-switch-right > .#{$prefix}-switch-back,
.#{$prefix}-tile-large .#{$prefix}-switch-right > .#{$prefix}-switch-back{
    -moz-transform:  translateX($tileSize * 2);
    -webkit-transform:  translateX($tileSize * 2);
    transform:  translateX($tileSize * 2);
}

.#{$prefix}-tile-default:hover .#{$prefix}-switch-right > .#{$prefix}-switch-front,
.#{$prefix}-tile-large:hover .#{$prefix}-switch-right > .#{$prefix}-switch-front{
    -moz-transform:  translateX($tileSize * 2);
    -webkit-transform:  translateX($tileSize* 2);
    transform:  translateX($tileSize* 2); 
}

/**
 * HteOS switch-down   
 * **/
.#{$prefix}-tile-mini .#{$prefix}-switch-up > .#{$prefix}-switch-front,
.#{$prefix}-tile-mini .#{$prefix}-switch-down > .#{$prefix}-switch-front,
.#{$prefix}-tile-default .#{$prefix}-switch-up > .#{$prefix}-switch-front,
.#{$prefix}-tile-default .#{$prefix}-switch-down > .#{$prefix}-switch-front,
.#{$prefix}-tile-large .#{$prefix}-switch-up > .#{$prefix}-switch-front,
.#{$prefix}-tile-large .#{$prefix}-switch-down > .#{$prefix}-switch-front{
    -moz-transform:  translateY(0);
    -webkit-transform:  translateY(0);
    transform:  translateY(0);
}

.#{$prefix}-tile-mini:hover .#{$prefix}-switch-up > .#{$prefix}-switch-back,
.#{$prefix}-tile-mini:hover .#{$prefix}-switch-down > .#{$prefix}-switch-back,
.#{$prefix}-tile-default:hover .#{$prefix}-switch-up > .#{$prefix}-switch-back,
.#{$prefix}-tile-default:hover .#{$prefix}-switch-down > .#{$prefix}-switch-back,
.#{$prefix}-tile-large:hover .#{$prefix}-switch-up > .#{$prefix}-switch-back,
.#{$prefix}-tile-large:hover .#{$prefix}-switch-down > .#{$prefix}-switch-back{
    -moz-transform:  translateY(0);
    -webkit-transform:  translateY(0);
    transform:  translateY(0);
}

.#{$prefix}-tile-mini .#{$prefix}-switch-down > .#{$prefix}-switch-back,
.#{$prefix}-tile-default .#{$prefix}-switch-down > .#{$prefix}-switch-back,{
    -moz-transform:  translateY($tileSize);
    -webkit-transform:  translateY($tileSize);
    transform:  translateY($tileSize);
}

.#{$prefix}-tile-large .#{$prefix}-switch-down > .#{$prefix}-switch-back{
    -moz-transform:  translateY($tileSize * 2);
    -webkit-transform:  translateY($tileSize * 2);
    transform:  translateY($tileSize * 2);
}

.#{$prefix}-tile-mini:hover .#{$prefix}-switch-down > .#{$prefix}-switch-front,
.#{$prefix}-tile-default:hover .#{$prefix}-switch-down > .#{$prefix}-switch-front{
    -moz-transform:  translateY($tileSize);
    -webkit-transform:  translateY($tileSize);
    transform:  translateY($tileSize);
}


.#{$prefix}-tile-large:hover .#{$prefix}-switch-down > .#{$prefix}-switch-front{
    -moz-transform:  translateY($tileSize * 2);
    -webkit-transform:  translateY($tileSize* 2);
    transform:  translateY($tileSize* 2); 
}

/**
 * HteOS slide up    
 * **/
.#{$prefix}-tile-mini .#{$prefix}-switch-up > .#{$prefix}-switch-back,
.#{$prefix}-tile-default .#{$prefix}-switch-up > .#{$prefix}-switch-back{
    -moz-transform:  translateY(0 - $tileSize);
    -webkit-transform:  translateY(0 - $tileSize);
    transform:  translateY(0 - $tileSize);
}


.#{$prefix}-tile-large .#{$prefix}-switch-up > .#{$prefix}-switch-back{
    -moz-transform:  translateY(0 - $tileSize * 2);
    -webkit-transform:  translateY(0 - $tileSize * 2);
    transform:  translateY(0 - $tileSize * 2);
}

.#{$prefix}-tile-mini:hover .#{$prefix}-switch-up > .#{$prefix}-switch-front,
.#{$prefix}-tile-default:hover .#{$prefix}-switch-up > .#{$prefix}-switch-front{
    -moz-transform:  translateY(0 - $tileSize);
    -webkit-transform:  translateY(0 - $tileSize);
    transform:  translateY(0 - $tileSize);
} 

.#{$prefix}-tile-large:hover .#{$prefix}-switch-up > .#{$prefix}-switch-front{
    -moz-transform:  translateY(0 - $tileSize * 2);
    -webkit-transform:  translateY(0 - $tileSize* 2);
    transform:  translateY(0 - $tileSize* 2); 
}

